<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Dashboard Pacers</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet"
        href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
</head>

<body>
    <div class="page-wrapper">
        <input type="checkbox" name="" id="menu-toggle">

        <div class="sidebar">
            <div class="brand">
                <h3>
                    <span class="lab la-untappd"></span>
                    Pacers
                </h3>
            </div>

            <div class="profile-card">
                <div class="profile-img" style="background-image: url(img/6.jpg);"></div>
                <div class="profile-info">
                    <h2>Heather Parker</h2>
                    <small>Web Architect</small>
                </div>
                <div class="profile-action">
                    <a href="" class="btn btn-white">
                        <span class="las la-coins"></span>
                        $2,300
                    </a>
                </div>
                <div class="profile-icons">
                    <span class="las la-user"></span>
                    <span class="las la-comment-alt"></span>
                    <span class="las la-file-invoice"></span>
                </div>
            </div>

            <div class="sidebar-menu">
                <div class="menu-item">
                    <a href="" class="active">
                        <span class="las la-home"></span>
                        <span>Home</span>
                    </a>
                </div>
                <div class="menu-item">
                    <a href="">
                        <span class="las la-project-diagram"></span>
                        <span>Projects</span>
                    </a>
                </div>
                <div class="menu-item">
                    <a href="">
                        <span class="las la-tasks"></span>
                        <span>Tasks</span>
                    </a>
                </div>
                <div class="menu-item">
                    <a href="">
                        <span class="las la-columns"></span>
                        <span>Kanban</span>
                    </a>
                </div>
                <div class="menu-item">
                    <a href="">
                        <span class="las la-users-cog"></span>
                        <span>Users</span>
                    </a>
                </div>
                <div class="menu-item">
                    <a href="">
                        <span class="las la-user-ninja"></span>
                        <span>Profile</span>
                    </a>
                </div>
                <div class="menu-item">
                    <a href="">
                        <span class="las la-file-invoice"></span>
                        <span>Invoices</span>
                    </a>
                </div>
                <div class="menu-item">
                    <a href="">
                        <span class="las la-cogs"></span>
                        <span>Widgets</span>
                    </a>
                </div>
            </div>

            <div class="sidebar-card">
                <h3>Hello Parker</h3>
                <p>You are yet to complete certain tasks that are assigned to you and haven't update the product manager
                    of your current status quo</p>
                <a href="" class="btn btn-block btn-white">Get started</a>
            </div>
        </div>

        <div class="main-content">
            <header>
                <label for="menu-toggle">
                    <span class="las la-bars"></span>
                </label>

                <div class="head-icons">
                    <span class="las la-search"></span>
                    <span class="las la-comment-alt"></span>
                    <span class="las la-bell"></span>
                    <div class="head-avatar">
                        <div class="avatar" style="background-image: url(img/6.jpg);"></div>
                        <span>John snow</span>
                    </div>
                </div>
            </header>

            <main>
                <div class="page-header">
                    <h1>Morning Weather</h1>
                    <small>Have a nice day</small>
                </div>

                <div class="analytics">
                    <div class="card engage-card">
                        <div class="card-head">
                            Engagement
                        </div>
                        <div class="card-body">
                            <div class="chart-wrapper">
                                <div id="chart"></div>
                            </div>
                        </div>
                    </div>
                    <div class="card emails-card">
                        <div class="card-head">
                            Emails sent
                        </div>
                        <div class="card-body">
                            <div id="emailChart"></div>
                        </div>
                        <div class="card-footer">
                            <div class="emails-info">
                                <div class="email-stat">
                                    <div class="status bg-danger"></div>
                                    <span>30 not sent</span>
                                </div>
                                <div class="email-stat">
                                    <div class="status bg-warning"></div>
                                    <span>38 opened</span>
                                </div>
                                <div class="email-stat">
                                    <div class="status bg-success"></div>
                                    <span>68 success</span>
                                </div>
                                <div class="email-stat">
                                    <div class="status bg-danger"></div>
                                    <span>SMTP error</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="grid-2">
                    <div class="card team-progress">
                        <div class="card-head">
                            <div class="team-head">
                                <div>
                                    <h3>Team progress</h3>
                                    <small>890, 344 sales</small>
                                </div>
                                <select name="" id="">
                                    <option value="">User</option>
                                </select>
                            </div>
                        </div>
                        <div class="card-body">
                            <table>
                                <thead>
                                    <tr>
                                        <th>Author</th>
                                        <th>Company</th>
                                        <th width="22%">Progress</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>
                                            <div class="team-info">
                                                <div class="team-img">
                                                    <img src="img/1.svg" alt="" srcset="">
                                                </div>
                                                <div class="team-details">
                                                    <h4>Jessie Clarkson</h4>
                                                    <small>HTML, JS, React JS</small>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="company-info">
                                                <h4>Agoda</h4>
                                                <small>Houses & Hotels</small>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="team-progress">
                                                <h4>85%</h4>
                                                <div class="progress-bar">
                                                    <div class="indicator danger" style="width: 85%;"></div>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <a href="" class="btn btn-main">View</a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="team-info">
                                                <div class="team-img">
                                                    <img src="img/1.svg" alt="" srcset="">
                                                </div>
                                                <div class="team-details">
                                                    <h4>Julia Simmons</h4>
                                                    <small>HTML, JS, React JS</small>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="company-info">
                                                <h4>Interco</h4>
                                                <small>Web UI/UX Design</small>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="team-progress">
                                                <h4>35%</h4>
                                                <div class="progress-bar">
                                                    <div class="indicator warning" style="width: 35%;"></div>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <a href="" class="btn btn-main">View</a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="team-info">
                                                <div class="team-img">
                                                    <img src="img/1.svg" alt="" srcset="">
                                                </div>
                                                <div class="team-details">
                                                    <h4>Jessie Clarkson</h4>
                                                    <small>HTML, JS, React JS</small>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="company-info">
                                                <h4>Agoda</h4>
                                                <small>Houses & Hotels</small>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="team-progress">
                                                <h4>85%</h4>
                                                <div class="progress-bar">
                                                    <div class="indicator success" style="width: 85%;"></div>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <a href="" class="btn btn-main">View</a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="team-info">
                                                <div class="team-img">
                                                    <img src="img/1.svg" alt="" srcset="">
                                                </div>
                                                <div class="team-details">
                                                    <h4>Julia Simmons</h4>
                                                    <small>HTML, JS, React JS</small>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="company-info">
                                                <h4>Interco</h4>
                                                <small>Web UI/UX Design</small>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="team-progress">
                                                <h4>35%</h4>
                                                <div class="progress-bar">
                                                    <div class="indicator info" style="width: 35%;"></div>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <a href="" class="btn btn-main">View</a>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="card competitors">
                        <div class="card-head">
                            <h4>My Competitors</h4>
                            <small>More than 400+ new members</small>
                        </div>
                        <div class="card-body">
                            <div class="compete-info">
                                <div>
                                    <img src="img/6.jpg" alt="" srcset="">
                                    <div class="compete-details">
                                        <h4>Cup & Green</h4>
                                        <small>Study highway types</small>
                                        <p>By: <a href="">Code resource</a></p>
                                    </div>
                                </div>
                                <div class="compete-sales">
                                    <h3>24,900</h3>
                                    <span>Sales</span>
                                </div>
                            </div>
                            <div class="compete-info">
                                <div>
                                    <img src="img/6.jpg" alt="" srcset="">
                                    <div class="compete-details">
                                        <h4>Cup & Green</h4>
                                        <small>Study highway types</small>
                                        <p>By: <a href="">Code resource</a></p>
                                    </div>
                                </div>
                                <div class="compete-sales">
                                    <h3>24,900</h3>
                                    <span>Sales</span>
                                </div>
                            </div>
                            <div class="compete-info">
                                <div>
                                    <img src="img/6.jpg" alt="" srcset="">
                                    <div class="compete-details">
                                        <h4>Cup & Green</h4>
                                        <small>Study highway types</small>
                                        <p>By: <a href="">Code resource</a></p>
                                    </div>
                                </div>
                                <div class="compete-sales">
                                    <h3>24,900</h3>
                                    <span>Sales</span>
                                </div>
                            </div>
                            <div class="compete-info">
                                <div>
                                    <img src="img/6.jpg" alt="" srcset="">
                                    <div class="compete-details">
                                        <h4>Cup & Green</h4>
                                        <small>Study highway types</small>
                                        <p>By: <a href="">Code resource</a></p>
                                    </div>
                                </div>
                                <div class="compete-sales">
                                    <h3>24,900</h3>
                                    <span>Sales</span>
                                </div>
                            </div>
                            <div class="compete-info">
                                <div>
                                    <img src="img/6.jpg" alt="" srcset="">
                                    <div class="compete-details">
                                        <h4>Cup & Green</h4>
                                        <small>Study highway types</small>
                                        <p>By: <a href="">Code resource</a></p>
                                    </div>
                                </div>
                                <div class="compete-sales">
                                    <h3>24,900</h3>
                                    <span>Sales</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script>
        let options = {
            chart: {
                type: 'line',
                height: '280px',
                fontFamily: 'Nunito',
                toolbar: {
                    show: false,
                }
            },
            stroke: {
                curve: 'smooth',
                width: 8,
                colors: ['#6E00FF'],
            },
            markers: {
                size: 10,
                colors: ['#6E00FF'],
            },
            grid: {
                strokeDashArray: 10,
            },
            series: [{
                name: 'engagement',
                data: [5, 3, 10, 8, 29, 19, 22, 8]
            }],
            xaxis: {
                categories: ["Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug"]
            }
        }

        var chart = new ApexCharts(document.querySelector("#chart"), options);

        chart.render();

        // Radial Bar Chart
        let optionsRadial = {
            series: [50],
            chart: {
                height: 280,
                type: "radialBar"
            },
            plotOptions: {
                radialBar: {
                    hollow: {
                        size: "60%"
                    },
                    dataLabels: {
                        name: {
                            show: false,
                        },
                        value: {
                            formatter: function (val) {
                                return parseInt(val.toString(), 10).toString();
                            },
                            color: "#777",
                            fontSize: "40px",
                        },
                    }
                }
            },
            fill: {
                colors: ['#FFB180'],
            },
            labels: ['']
        };

        let chartRadial = new ApexCharts(document.querySelector("#emailChart"), optionsRadial);

        chartRadial.render();
    </script>
</body>

</html>